@import 'variables';

.btn {
	border-width: 2px;
	padding: 5px 12px;
	text-transform: uppercase;

	&.btn-default {
		height: 50px;
		min-width: 90px;

		&:hover {
			background-color: #ddeeed;
			border-color: #ddeeed;
		}

		&:active {
			outline: none;
			background-color: #dce6e5;
			border-color: #dce6e5;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2);
		}

		&:focus {
			outline-offset: 0;
			background-color: #dce6e5;
			border-color: #fff;
			outline: 2px solid #dce6e5;
		}
	}

	&.btn-primary {
		&:hover {
			background-color: #ffe376;
			border-color: #ffe376;
		}

		&:active {
			outline: none;
			background-color: #ffc900;
			border-color: #ffc900;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2);
		}

		&:focus {
			outline-offset: 0;
			background-color: #ffc900;
			border-color: #fff;
			outline: 2px solid #ffc900;
		}
	}

	&.btn-xlg {
		font-size: 28px;
		font-weight: 600;
		padding: 12px 70px;
		text-transform: none;
		color: #ffc900;
		background-color: transparent;

		@media (max-width: @screen-md-max) {
			padding: 12px 40px;
		}

		@media (max-width: @screen-sm-max) {
			padding: 10px 30px;
		}

		&:hover, &:active, &:focus {
			color: #092d3d;// TODO: probably change this.
		}
	}

	&.btn-icon {
		.fa {
			margin-right: 0;
		}
	}

	&.btn-copy {
		padding: 6px 30px;
	}

	&.btn-checked {
		&, &:hover, &:focus, &:active {
			color: #092d3d;
			background-color: #ffc900;
			border-color: #ffc900;
		}
	}
}
